<template>
  <div class="class-test">
    <!-- 边看边测-题目 -->
    <el-dialog
      class="global-dialog sideLookDialog"
      title="边看边测"
      :visible.sync="sideLookVisible"
      width="800px"
      :close-on-click-modal="false"
      :show-close="false"
    >
      <div class="sideLook">
        <el-tabs
          v-model="tabTempIndex"
          type="card"
        >
          <el-tab-pane
            v-for="(item, index) in testQuestionData"
            :label="`第${index + 1}题`"
            :name="item.name"
            :key="index"
          >
            <el-form label-width="60px">
              <el-form-item label="题目：">
                <div class="sideLook-txt">{{ item.problem }}</div>
              </el-form-item>
              <el-form-item label="A.">
                <div class="sideLook-txt">{{ item.A }}</div>
              </el-form-item>
              <el-form-item label="B.">
                <div class="sideLook-txt">{{ item.B }}</div>
              </el-form-item>
              <el-form-item label="C.">
                <div class="sideLook-txt">{{ item.C }}</div>
              </el-form-item>
              <el-form-item label="D.">
                <div class="sideLook-txt">{{ item.D }}</div>
              </el-form-item>

              <template v-if="(item.user_answer && item.answered) || resultVisible">
                <el-form-item
                  label="已选择"
                  label-width="60px"
                >
                  <el-radio-group :value="item.user_answer">
                    <el-radio :label="'1'">A</el-radio>
                    <el-radio :label="'2'">B</el-radio>
                    <el-radio :label="'3'">C</el-radio>
                    <el-radio :label="'4'">D</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item
                  class="answerItem"
                  label-width="0"
                >
                  <div>
                    <i
                      v-if="item.answer == item.user_answer"
                      class="el-icon-check i-tip"
                    ></i>
                    <i
                      v-else
                      class="el-icon-close i-tip"
                    ></i>
                    <span class="rightAnswer">正确答案：{{ answerCheck[Number(item.answer) - 1] }}</span>
                  </div>
                  <div>
                    解析：
                    <p v-html="item.resolve"></p>
                    <span v-if="item.resolve == ''">暂无解析</span>
                  </div>
                </el-form-item>
                <el-checkbox
                  v-show="!resultVisible"
                  class="noSeeCheckbox"
                  v-model="noSeeChecked"
                >
                  不再显示该测试</el-checkbox>
              </template>

              <template v-else>
                <el-form-item
                  label="选择"
                  label-width="60px"
                >
                  <el-radio-group v-model="item.user_answer">
                    <el-radio :label="'1'">A</el-radio>
                    <el-radio :label="'2'">B</el-radio>
                    <el-radio :label="'3'">C</el-radio>
                    <el-radio :label="'4'">D</el-radio>
                  </el-radio-group>
                </el-form-item>
              </template>

              <el-form-item
                class="button-item"
                label-width="0"
              >
                <el-button
                  class="sureBtn"
                  type="primary"
                  @click="answerTestQuestion()"
                >确定</el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </div>
      <div
        slot="footer"
        class="dialog-footer"
      ></div>
    </el-dialog>

    <!-- 边看边测-测试结果-->
    <el-dialog
      class="global-dialog testResultDialog"
      title="观看结果"
      :visible.sync="visible"
      width="430px"
      :close-on-click-modal="false"
      :show-close="false"
    >
      <!-- 获取学分部分 -->
      <div
        class="score-tips-row"
        v-if="scoreVisible"
      >
        <i class="go-score-icon"></i>
        <span class="tip">恭喜您获得本次视频学习学分</span>
        <span class="score-value">{{ scoreVal }}</span>
      </div>
      <!-- 测试结果提示框 -->
      <div
        class="test-result-row"
        v-if="resultVisible"
      >
        <p class="title">本次视频测试共有 {{ restultData.length }} 题，您答对 {{ rightCount }} 题，答错 {{ restultData.length -
                        rightCount
                }} 题</p>
        <template>
          <el-table
            :data="restultData"
            :span-method="objectSpanMethod"
            max-height="320px"
            border
            style="width: 100%"
          >
            <el-table-column
              label="题目"
              prop="turn"
              align="center"
              width="50px"
            >
            </el-table-column>

            <el-table-column
              label="小题"
              prop="inx"
              align="center"
              width="50px"
            >
            </el-table-column>

            <el-table-column
              label="选择"
              align="center"
              width="60px"
            >
              <template slot-scope="scope">
                {{ answerCheck[scope.row.user_answer - 1] }}
              </template>
            </el-table-column>

            <el-table-column
              label="正确"
              align="center"
              width="60px"
            >
              <template slot-scope="scope">
                {{ answerCheck[scope.row.answer - 1] }}
              </template>
            </el-table-column>

            <el-table-column
              label="结果"
              align="center"
              width="60px"
            >
              <template slot-scope="scope">
                <i
                  v-if="scope.row.answer == scope.row.user_answer"
                  class="el-icon-check"
                ></i>
                <i
                  v-else
                  class="el-icon-close"
                ></i>
              </template>
            </el-table-column>

            <el-table-column
              align="center"
              label="详情"
            >
              <template slot-scope="scope">
                <el-button
                  type="text"
                  @click="seeDetail(scope.$index, scope.row)"
                >详情</el-button>
              </template>
            </el-table-column>

          </el-table>
        </template>
      </div>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          type="primary"
          size="small"
          @click="close"
        >确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      videoid: this.$route.query.id,
      // 边看边测：
      testId: null,
      // 题目弹窗：
      sideLookVisible: false,
      tabTempIndex: "0",
      testQuestionData: [],
      answerQuestionData: [],
      answerCheck: ["A", "B", "C", "D"],
      answerCheckedNum: 0,
      noSeeChecked: false,
      notToSee: 0,
      timeCount: 0,
      // 题目的数据
      testData: [],
      hasTest: false,
      // 测试结果部分：
      scoreVal: 0,
      scoreVisible: false,
      resultVisible: false,
      allTestTime: [],
      restultData: [],
      rightCount: 0,
    };
  },
  mounted() {
    this.videoTest();
  },
  computed: {
    // 测试结果-弹窗显示/隐藏
    visible() {
      return this.scoreVisible || this.resultVisible;
    },
  },
  watch: {
    // 题目-弹窗显示/隐藏
    sideLookVisible(newVal, oldVal) {
      if (newVal || this.resultVisible) {
        // this.$parent.player.pause();
        this.$parent.pauseVideo();
      } else {
        // this.$parent.player.play();
        this.$parent.playVideo();
      }
    },
  },
  methods: {
    //添加学分记录
    addScoreRecord() {
      let success = (data) => {
        // 弹窗给出获取了学分的提示
        this.scoreVal = this.$parent.options.study_score;
        this.scoreVisible = true;
        // 获取学分后，需要重新获取一下数据，后端返回数据里面的need_score_status变成false了，避免重复获取学分
        this.$parent.$parent.getIntroduction();
      };
      this.$ajax({
        url: "api/video/add_video_score",
        method: "post",
        data: {
          video_id: this.videoid,
        },
        func: {
          success: success,
        },
      });
    },
    // 获取边看边测的题目数据
    videoTest() {
      if (this.user_login_id === 0 || this.$route.query.cutid != undefined) {
        return;
      }
      let success = (res) => {
        let data = res.data;
        if (data.length > 0) {
          this.testData = data;
          data.map((x) => {
            if (x.answer_recorder.length === 0) {
              this.hasTest = true;
              this.allTestTime.push(x.test_time);
            }
          });

          // console.log('测试数据',this.testData,this.hasTest)
        }
      };
      this.$ajax({
        url: "api/video/video_test",
        method: "get",
        params: {
          id: this.videoid,
          is_disable: 1,
        },
        func: {
          success: success,
        },
      });
    },

    //题目-获取题目
    getVideoTest(testId) {
      this.testQuestionData = [];
      let success = (res) => {
        let data = res.data;
        if (data.length > 0) {
          // this.$parent.player.play();
          this.tabTempIndex = "0"; //每次弹窗出现的时，默认显示第一题
          this.sideLookVisible = true; //显示弹窗
          this.testQuestionData = data.map((x) => {
            //添加已答标记
            x.answered = x.user_answer ? true : false;
            return x;
          });
        }
      };
      this.$ajax({
        url: "api/video/test_question",
        method: "get",
        params: {
          id: testId,
        },
        func: {
          success: success,
        },
      });
    },
    // 题目-边看边测弹窗确定按钮
    answerTestQuestion() {
      if (this.resultVisible) {
        this.sideLookVisible = false;
      } else {
        //若获取到测试题目数据（testQuestionData）里user_answer是null，说明未作答
        let answer_data = [];
        let notAnswerInx = [];
        this.testQuestionData.map((x, inx) => {
          if (!x.user_answer) {
            notAnswerInx.push(inx + 1);
          }
          if (!x.answered) {
            answer_data.push({
              answer: this.answerCheck[x.user_answer - 1],
              question_id: x.question_id,
            });
          }
        });

        if (notAnswerInx.length === 0) {
          if (this.noSeeChecked) {
            //下次不显示
            this.testAgain();
          }
          if (answer_data.length > 0) {
            this.saveTest(answer_data);
          }
          this.videoTest();
          this.sideLookVisible = false;
          // this.$parent.player.play();
        } else {
          this.$message.warning(`第${notAnswerInx.toString()}题还没作答`);
        }
      }
    },
    // 题目-提交测试答案：
    saveTest(answer_data) {
      let success = (data) => {
        const length = this.testQuestionData.length;

        let questions = this.testQuestionData.map((x, i) => {
          const isNo1 = this.restultData.length === 0;
          x.inx = i + 1;
          x.id = this.testId;
          x.turn = isNo1
            ? 1
            : this.restultData[this.restultData.length - 1].turn + 1;
          x.firstColSet = {
            rowspan: i === 0 ? length : 0,
            colspan: i === 0 ? 1 : 0,
          };
          return x;
        });
        this.restultData = this.restultData.concat(questions); //收集答过的题目
        //console.log(this.restultData)
        this.$message.success("已提交答案");
      };
      let params = {
        answer_data: answer_data,
        test_id: this.testId,
        is_not_see: this.notToSee,
      };
      this.$ajax.post("api/video/test_question", params, {
        func: { success: success },
      });
    },
    //题目-下次是否还显示该测试结果
    testAgain() {
      let success = (data) => {
        this.$message.success("下次将不再显示此测试");
        this.noSeeChecked = false;
      };
      this.$ajax({
        url: "api/video/test_disable",
        method: "post",
        data: {
          test_id: this.testId,
        },
        func: {
          success: success,
        },
      });
    },
    //测试结果-获取表格数据
    getResultTableData() {
      this.restultData.map((x) => {
        if (x.user_answer == x.answer) {
          this.rightCount++;
        }
      });
    },
    // 测试结果-关闭弹窗
    close() {
      this.scoreVisible = false;
      this.resultVisible = false;
    },
    // 测试结果-表格合并单元格
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        //只针对第一列 题目选项 进行合并
        return row.firstColSet;
      }
    },
    // 测试结果-表格查看详情
    seeDetail(index, row) {
      this.testQuestionData = [];
      this.restultData.map((x) => {
        if (x.id === row.id) {
          this.testQuestionData.push(x);
        }
      });
      this.tabTempIndex = "0";
      this.sideLookVisible = true;
    },
    dplayerTest(current_time) {
      const id = this.testData.filter((x) => {
        return x.test_time === current_time;
      })[0].id;
      this.getVideoTest(id);
      this.testId = id;
      this.allTestTime = this.allTestTime.filter((x) => {
        return x > current_time;
      });
      console.log(this.allTestTime);
    },
    dplayerEnd() {
      //视频播放结束
      console.log('视频播放结束')
      if (this.$parent.needScore) {
        //获取学分的
        this.$parent.needScore = false;
        this.addScoreRecord(); //请求后台添加学分记录
      }
      if (this.hasTest) {
        
        this.resultVisible = true;
        this.hasTest = false;
        this.getResultTableData();
      }
    },
  },
};
</script>
<style lang="scss">
.sideLookDialog {
  .sideLook-txt,
  .el-form-item__content {
    line-height: 26px;
  }

  .el-tabs__header {
    margin: 0 20px 15px;
  }

  .el-form {
    padding: 0 25px;
    max-height: 480px;
    overflow-y: auto;
  }

  .el-form-item__label {
    line-height: 26px;
    text-align: left;
  }

  .answerItem {
    padding: 10px 20px;
    background-color: #f2f2f2;
    position: relative;
    border-radius: 2px;

    .i-tip {
      color: #fff;
      padding: 2px;
      font-size: 25px;
      border-radius: 4px;
      vertical-align: middle;
      margin-right: 20px;
    }

    .el-icon-check {
      background-color: #77cd85;
    }

    .el-icon-close {
      background-color: #e33f68;
    }

    .rightAnswer {
      vertical-align: middle;
    }
  }

  .answerItem::after {
    content: "";
    position: absolute;
    bottom: -20px;
    left: 0;
    width: 100%;
    border-bottom: 2px dashed #f2f2f2;
  }

  .button-item {
    text-align: center;
    margin-top: 15px;

    .sureBtn {
      width: 80px;
      height: 30px;
      padding: 0;
      // border: 0;
    }

    .noAgainBtn {
      width: 140px;
      height: 30px;
      padding: 0;
      border: 0;
    }
  }

  .noSeeCheckbox {
    padding: 20px 0 10px;
  }
}

.testResultDialog {
  .score-tips-row {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80px;
    border-radius: 4px;
    background-color: #ffeec8;

    .go-score-icon {
      display: inline-block;
      width: 24px;
      height: 24px;
      background: url("../../../../assets/images/get-score.png");
    }

    .tip {
      display: inline-block;
      width: 182px;
      margin: 0 30px;
      font-size: 14px;
      color: #d47427;
    }

    .score-value {
      display: inline-block;
      width: 40px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      color: #fff;
      border-radius: 50%;
      background-color: #e36d0fff;
    }
  }

  .test-result-row {
    text-align: center;

    .title {
      padding: 20px 0;
      font-size: 14px;
      font-weight: 600;
      color: #000;
    }
  }

  .el-table th.is-leaf {
    background-color: #efefef;
    border: 1px solid #efefef;
  }

  .el-table th {
    padding: 0;
    height: 36px;
    line-height: 36px;
  }

  .el-table td {
    padding: 0;
    height: 30px;
    line-height: 30px;
  }

  .el-icon-check {
    color: #2cbb2cff;
  }

  .el-icon-close {
    color: #e42a2aff;
  }

  .el-icon-check,
  .el-icon-close {
    font-weight: 600;
  }

  .dialog-footer {
    text-align: center;

    .el-button {
      width: 80px;
    }
  }
}
</style>
